<script type="text/javascript" src="views/parkLotCenter/SystemConfigManager/js/MonitorCenterVersion_List.js"></script>
<style>
.MonitorCenterVersion-panel {
	width: 100%;
	height: 100%;
}

.MonitorCenterVersion-panel .versionInfo {
	width: 320px;
	border-right: 1px solid #c5c5c5;
	float: left;
	height: 100%;
}

.MonitorCenterVersion-panel .versionList {
	width: calc(100% -   322px);
	float: left;
}

.MonitorCenterVersion-panel .versionInfo .InfoDiv {
	width: 280px;
	height: 220px;
	border: 1px solid #dfdfdf;
	border-radius: 12px;
	background: #f5f5f5;
	margin: 25px auto;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2) inset;
	position: relative;
}

.MonitorCenterVersion-panel .versionInfo h3 {
	display: block;
	height: 35px;
	line-height: 35px;
	text-align: center;
	background-color: #ececee;
	border-bottom: 1px solid #dbdbde;
	background-image: none,
		-moz-linear-gradient(to bottom, rgba(255, 255, 255, .45) 0,
		rgba(255, 255, 255, 0) 100% );
	background-image: none,
		-ms-linear-gradient(to bottom, rgba(255, 255, 255, .45) 0,
		rgba(255, 255, 255, 0) 100% );
	background-image: none,
		-webkit-linear-gradient(to bottom, rgba(255, 255, 255, .45) 0,
		rgba(255, 255, 255, 0) 100% );
	background-image: none,
		-o-linear-gradient(to bottom, rgba(255, 255, 255, .45) 0,
		rgba(255, 255, 255, 0) 100% );
	background-image: none,
		linear-gradient(to bottom, rgba(255, 255, 255, .45) 0,
		rgba(255, 255, 255, 0) 100% );
}

.MonitorCenterVersion-panel .versionInfo .InfoDiv.active {
	background: #3ca444;
	border: 1px solid #1b8f24;
}

.MonitorCenterVersion-panel .versionInfo .InfoDiv .active {
	width: 280px;
	height: 220px;
	background: rgba(255, 255, 255, .05);
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	cursor:pointer;
}

.MonitorCenterVersion-panel .versionInfo .InfoDiv.active p span {
	color: #fff;
}

.MonitorCenterVersion-panel .versionInfo .InfoDiv h5 {
	width: 210px;
	height: 40px;
	line-height: 40px;
	border-radius: 15px;
	box-shadow: -3px -5px 6px rgba(0, 0, 0, .3) inset;
	background: #fff;
	display: block;
	margin: -1px auto 10px;
	text-align: center;
}

.MonitorCenterVersion-panel .versionInfo .InfoDiv p {
	margin: 0 10px;
	line-height: 28px;
}
.MonitorCenterVersion-panel .versionInfo .InfoDiv p span:first-child{
    width: 100px;
    text-align: right;
    display: inline-block;
    vertical-align: top;
}
.MonitorCenterVersion-panel .versionInfo .InfoDiv p span:last-child{
    width: calc(100% - 120px);
    display: inline-block;
    word-wrap: break-word;
}
    


</style>
<script type="text/javascript">
	var ctVersionJs = null;
	$(document).ready(function() {
		ctVersionJs = new centerVersionJs($("#monitorCenterVersionDiv"));
		ctVersionJs.findGridData();
	});
</script>

<div class="MonitorCenterVersion-panel" id="monitorCenterVersionDiv" style="height: 100%;">
	<div class="versionInfo">
		<h3>版本列表</h3>
		<div id="versionList"
			style="height:calc(100% - 36px);overflow-x: hidden; overflow-y: auto">

		</div>
	</div>
	<div class="versionList" style="height: 100%;">
		<div class="search-panel" style="float:left;">
			<div class="search-text">
				<label>工作站名称：</label> <input class="k-textbox"  data-bind="value:workstationName" />
			</div>
			<div class="search-text">
				<label>升级状态：</label> <input id="updateStatus" data-bind="value:updateStatus"/>
			</div>
			<div class="search-text">
				<label>开始时间：</label> <input type="text"
					bdDataTimePicker=" "
					data-bind="value:beginTime" />
			</div>
			<div class="search-text">
				<label>结束时间：</label> <input type="text"
					bdDataTimePicker=" " 
					data-bind="value:endTime" />
			</div>
			<div class="search-Btn">
				<button data-bind="click:queryInfo">查询</button>
				<button data-bind="click:resetInfo">重置</button>
			</div>
		</div>
		<div style="width:100%;height:calc(100% - 70px);float:left;">
			 <div class="styleGrid" id="monitorUpdateGrid" style="height: 100%;"></div>
		</div>
	</div>

	<div id="templateDiv" style="display: none;">
		<div class="InfoDiv" name="versionInfo">
			<div class="active"></div>
			<h5>版本号：<span name="versionNumber"></span></h5>
			<p>
				<span>文件大小：</span><span name="versionSize"></span>
			</p>
			<p>
				<span>MD5校验码：</span><span name="checkCode"></span>
			</p>
			<p>
				<span>发布时间：</span><span name="releaseTime"></span>
			</p>
			<p>
				<span>上传人：</span><span name="uploadUserName"></span>
			</p>
			<p>
				<span>上传时间：</span><span name="uploadTime"></span>
			</p>
		</div>
	</div>
</div>